<template>
  <div class="tree-container" :style="user.roleName === 'TENANT_ADMIN' || user.roleName === 'ORG_ADMIN'?'height: calc(100% - 90px);':'height: calc(100% - 40px);'">
    <div :class="['middle', first ? 'middle1' : '']">
      <el-tree :data="dataTree" :props="defaultProps" @node-click="handleNodeClick" ref="refTree" v-if="isTree"
        node-key="id" :load="loadNode" lazy highlight-current :expand-on-click-node="false">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <div>
            <i class="iconfont gfjianzhuwu" v-if="node.level == '1'"></i>
            <i class="iconfont zuzhi" v-else></i>
            {{ node.label }}
          </div>
        </div>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { reqSpaceManager } from "@api/api.js";
import { mapState } from "vuex";

export default {
  props: ['orgId'],
  components: {},
  mixins: [],
  data() {
    return {
      dataTree: [],
      defaultProps: {
        children: "children",
        label: "name",
        isLeaf: "hasChildren",
        id: "id",
      },
      first: false, //第一次加载，点击后消除
      loadingSearch: false,
      firstInfo: {}, //默认第一条信息
      editOrgInfo: {}, //修改一条组织机构信息
      detailOrgInfo: {}, //详情
      flagtree: false,
      data: [],
      isTree: true,
      currentData: "",
      currentNode: "",
      defaultCheckedKeys: "", // 选择节点后默认展示
      defaultCheckedKeys_copy: "",
      checkkey: 0, //选中的key
    };
  },
  computed: {
    ...mapState(["user", "spacesManage"]),
  },
  mounted() { },
  methods: {
    getclone(){
      this.dataTree =[]
    },
    // 建筑物
    async getBuildings(orgId) {
      let params = {
        userId: this.user.userId,
        roleName: this.user.roleName,
        metaCode: 1,
        orgId: orgId,
        isStatistics: 0,
      };
      let res = await reqSpaceManager(1, 999, params);
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let unitTree = [];
      res.data.rows.forEach((item) => {
        if (item.hasChildren ==1) {
          item.hasChildren = false;//有下级楼层
        } else {
          item.hasChildren = true;
        }
        unitTree.push({
          name: item.name,
          id: item.id,
          hasChildren: item.hasChildren,
          level: item.level,
          image: item.image,
        });
      });
      // console.log(unitTree, "unitTree");
      this.dataTree = unitTree;
      // this.first = true; //true会默认选中第一个
    },
    // 树节点懒加载
    async loadNode(node, resolve) {
      // console.log(node,'node');
      if (node.level == 1) {
        // 建筑物
        let params = {
          userId: this.user.userId,
          roleName: this.user.roleName,
          metaCode: 2,
          orgId: this.orgId,
          isStatistics: 0,
          parentId:node.data.id//建筑物id
        };
        let res = await reqSpaceManager(1, 99, params);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        let { rows } = res.data;
        rows.forEach((item) => {
          item.hasChildren = true;
        });
        return resolve(rows);
      }
    },


    // 点击一条
    handleNodeClick(data, node) {
      if (node.level == 1) {
        this.$refs.refTree.setCurrentKey(this.checkkey ||null); //通过 key 设置某个节点的当前选中状态,为 null 则取消当前高亮的节点
        return; //父级不走
      }
      this.checkkey = data.id; // 存储选中的key
      // this.first = false;
      if (node.level == 2) {
        // 楼层
        this.$emit("toggleOrgId", data);
      }else{
        this.$emit("toggleOrgId", '');
      }
    },

  },
};
</script>

<style scoped lang="less">
.tree-container {
  width: 100%;
  // height: 100%;
  height: calc(100% - 80px);

  .header {
    position: relative;
    height: 65px;
    padding: 0 20px;
    border-bottom: 1px solid @primaryBorderColor;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      width: 25%;
      font-size: 20px;
      color: @primaryThemeTxtColor;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .left {
      width: 100%;
    }

    .right {
      width: 75%;
      display: flex;
      justify-content: flex-end;
      //   justify-content: space-between;
    }
  }

  .middle {
    // height: calc(100% - 65px);
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;

    .custom-tree-node {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding-left: 0.5%;
      box-sizing: border-box;

      .guanliyuan_guanliyuanliebiao {
        position: absolute;
        left: -2.5%;
        font-size: 12px;
      }

      .tree-node_ctrls {
        position: absolute;
        right: 0;
        width: 30%;
        text-align: right;
        padding-right: 10px;
        // background-color: pink;

        i {
          color: #aaa;
          font-size: 20px;
          margin-right: 10px;

          &:hover {
            color: #fff;
          }
        }
      }
    }

    ::v-deep .el-tree {
      height: 100%;
      font-size: 14px;
      background: @primaryHeaderBgcolor;
      box-sizing: border-box;
      padding: 12px 0;
      color: @primaryThemeTxtColor;
      overflow: hidden;
      overflow-y: scroll;
    }

    ::v-deep .el-tree-node__content {

      // padding: 5px 0 !important;
      &:hover {
        background: @paginationBgcolor !important;
        border-radius: 4px;
      }
    }

    ::v-deep .el-tree-node.is-current.is-focusable>.el-tree-node__content {
      background-color: #7367f0 !important;
      border-radius: 4px;
    }

    ::v-deep .el-tree-node.is-focusable>.el-tree-node__content {
      padding: 5px 0;
    }

    // 解决点击白底问题
    ::v-deep .el-tree-node.is-focusable>.el-tree-node__content {
      // background-color: @primaryTree;
      border-radius: 4px;
    }

    ::v-deep .is-current>.el-tree-node__content>.el-tree-node__label {
      color: #f0f0f0;
    }

    .el-icon-more {
      color: @primaryThemeTxtColor;
      font-size: 15px;
      margin-right: 10px;
    }

    // 组织机构更多
    ::v-deep .is-current>.el-tree-node__content>.custom-tree-node>.el-dropdown .el-icon-more {
      color: #f0f0f0;
    }
  }

  // 建筑物管理样式
  .middle2 {
    height: calc(100% - 111px);
    overflow: hidden;
    overflow-y: scroll;

    .custom-tree-node {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding-left: 0.5%;
      box-sizing: border-box;

      .guanliyuan_guanliyuanliebiao {
        position: absolute;
        left: -2.5%;
        font-size: 12px;
      }

      .tree-node_ctrls {
        position: absolute;
        right: 0;
        width: 30%;
        text-align: right;
        padding-right: 10px;
        // background-color: pink;

        i {
          color: #aaa;
          font-size: 20px;
          margin-right: 10px;

          &:hover {
            color: #fff;
          }
        }
      }
    }

    ::v-deep .el-tree {
      height: 100%;
      font-size: 14px;
      background: @primaryHeaderBgcolor;
      box-sizing: border-box;
      padding: 12px 10px;
      color: @primaryThemeTxtColor;
      overflow: hidden;
      overflow-y: scroll;
    }

    ::v-deep .el-tree-node__content {

      // padding: 5px 0 !important;
      &:hover {
        background: @paginationBgcolor !important;
        border-radius: 4px;
      }
    }

    ::v-deep .el-tree-node.is-current.is-focusable>.el-tree-node__content {
      background-color: #7367f0 !important;
      border-radius: 4px;
    }

    ::v-deep .el-tree-node.is-focusable>.el-tree-node__content {
      padding: 5px 0;
    }

    // 解决点击白底问题
    ::v-deep .el-tree-node.is-focusable>.el-tree-node__content {
      // background-color: @primaryTree;
      border-radius: 4px;
    }

    ::v-deep .is-current>.el-tree-node__content>.el-tree-node__label {
      color: #f0f0f0;
    }

    .el-icon-more {
      color: @primaryThemeTxtColor;
      font-size: 15px;
      margin-right: 10px;
    }

    // 组织机构更多
    ::v-deep .is-current>.el-tree-node__content>.custom-tree-node>.el-dropdown .el-icon-more {
      color: #f0f0f0;
    }
  }

  .middle1 {
    // ::v-deep .el-tree .el-tree-node.is-focusable:first-child {
    //   background-color: #7367f0 !important;
    //   border-radius: 4px;
    //   .el-tree-node__content {
    //     color: #f6f6f6;
    //   }

    //   .el-tree-node__content {
    //     padding: 5px 0 !important;
    //     &:hover {
    //       background: #7367f0 !important;
    //       border-radius: 4px;
    //     }
    //   }
    // }

    // 解决点击白底问题
    ::v-deep .el-tree>.el-tree-node:first-of-type>.el-tree-node__content {
      background-color: #7367f0 !important;
      color: #f0f0f0;
    }

    // 组织机构更多
    ::v-deep .el-tree>.el-tree-node:first-of-type>.el-tree-node__content .el-icon-more {
      color: #f0f0f0;
    }
  }
}

// 解决收起后白色背景问题
::v-deep .el-tree-node.is-expanded>.el-tree-node__content {
  background-color: transparent;
}

// 解决展开后白色背景问题
::v-deep .el-tree-node.is-focusable>.el-tree-node__content {
  background-color: transparent;
}

// input后面的查询按钮
::v-deep .el-input-group__append {
  color: #fff;
  border: none;
  background-color: #7367f0;
}
</style>
